<script setup lang="ts">
import { Data, LayoutThree, Lightning, Share } from '@icon-park/vue-next'
import { computed, defineComponent, h } from 'vue'
import { useRoute } from 'vue-router'

import { useEnvStore } from '@/stores/debug'

const linkItems = [
  // {
  //   value: 'dataSource',
  //   label: '大数据渲染',
  //   bg: `radial-gradient(50% 50% at 50% 100%, #84edb9 0%, rgba(0, 196, 83, 0) 100%)`,
  // },
  // {
  //   value: 'layout',
  //   label: '低代码',
  //   bg: `radial-gradient(50% 50% at 50% 100%, #1677ff 0%, rgba(24, 190, 212, 0) 100%)`,
  // },
  // {
  //   value: 'actions',
  //   label: '图表',
  //   bg: `radial-gradient(50% 50% at 50% 100%, #b281f2 0%, rgba(241, 60, 11, 0) 100%)`,
  // }
]

defineProps<{
  msg: string
}>()

// 千万不要这样！
// const { debug, toggle } = useEnvStore()
const envStore = useEnvStore()

const route = useRoute()

const activeLink = computed(() => route.path)


const Icon = defineComponent({
  setup(props) {
    // 千万不能这样子写！！！
    // const { type } = props
    switch (props.type) {
      case 'dataSource':
        return () => h(Data, { size: 16 })
      case 'layout':
        return () => h(LayoutThree, { size: 16 })
      case 'actions':
        return () => h(Lightning, { size: 16 })

      default:
        return () => h('div')
    }
  },
  props: {
    type: {
      type: String,
      required: true
    }
  }
})

const share = () => {
  console.log('分享')
  alert('发布成功');
}
</script>

<template>
  <div class="app-navigator">
    <div class="app-info-wrapper">
      <div class="app-logo">
        <img
          src="../assets/pisces.svg"
        />
      </div>
      <h1 class="app-name">大伟聊前端</h1>
    </div>
    <div class="app-navigator-link-wrapper">
      <router-link
        class="app-navigator-link-item"
        v-for="item in linkItems"
        :key="item.value"
        :style="activeLink.includes(item.value) && { background: item.bg }"
        :to="`/app/${item.value}`"
      >
        <div >
        </div>
        <span class="item-title">
          {{ item.label }}
        </span>


      </router-link>
    </div>
    <div class="app-setting-wrapper">
      <!-- <div class="common-btn debug-btn" :class="{ debug: envStore.debug }" @click="envStore.toggle">
        开发模式:({{ envStore.debug ? '开' : '关' }})
      </div> -->
      <div class="common-btn" @click="share">
        <Share />
        发布
      </div>
    </div>
  </div>
</template>

<style scoped>
.app-navigator {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 48px;
  background-color: var(--color-white);
  box-shadow: rgb(0 0 0 / 8%) 0 1px 0;
}

.app-info-wrapper {
  width: 1000px;
  display: flex;
  place-items: center;
}

.app-logo {
  width: 32px;
  height: 32px;
  margin: 10px 8px 10px 18px;
  border-radius: 8px;
  background-color: var(--color-primary);
}

.app-logo img {
  width: 100%;
  height: 100%;
  padding: 6px;
}

.app-name {
  color: var(--color-gray-900);
  font-weight: var(--font-weight-bolder);
  font-size: var(--font-size-large);
}

.app-navigator-link-wrapper {
  display: flex;
  flex-shrink: 0;
  justify-content: space-between;
  align-self: stretch;
}

.app-navigator-link-item {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 8px;
  margin: 0 24px;
  align-self: stretch;
  background-color: var(--color-white);
  color: var(--color-text);
  font-size: var(--font-size-normal);
  font-weight: var(--font-weight-bold);
}

.item-title {
  margin-left: 8px;
  color: var(--color-black);
}

.item-border {
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
}

.app-setting-wrapper {
  width: 1000px;
  display: flex;
  place-items: center;
  justify-content: flex-end;
  margin-right: 18px;
  gap: 12px;
}

.common-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px;
  border-radius: 8px;
  background-color: var(--color-primary);
  color: var(--color-white);
  font-size: var(--font-size-normal);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  user-select: none;
}

.debug-btn {
  box-shadow: var(--color-gray-300) 0 0 0 1px;
  background-color: var(--color-white);
  color: var(--color-black);
}

.debug-btn.debug {
  color: var(--color-primary);
  box-shadow: var(--color-primary) 0 0 0 1px;
}
</style>
